<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 300px;
            height: 400px;
            border: 1px solid black;
            display: flex;
            flex-flow: column;
        }
        .box .a{
            height: 50%;
            background-color: bisque;
        }
        .box .b{
            flex-grow: 1;
            background-color: brown;
        }
        .line{
            height: 10px;
            background-color: blueviolet;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="a">divA</div>
        <div class="b">divB</div>
    </div>
    <div>
        10%<input type="range" min="10" step="10"  max="60" onchange="changeDivAHeight(this.value)">60%
    </div>
    <script>
        /*
        1、js对页面中已存在一个或多个DOM进行调整时，此时整个页面中受影响的DOM元素可能会存在很多，
           浏览器需要对这些受影响的元素进行同样计算和调整
        */
        function changeDivAHeight(v){
            let divADom = document.querySelector(".box .a");
            divADom.style.height = v + "%"
        }
    </script>
    <hr>
    <ul id="list"></ul>
    <div class="line"></div>
    <script>
        /*
            因为JS对DOM的非智能操作，每次循环创建li标签添加ul DOM中时，ul DOM 高度都会被重新计算；导致页面后续的标签也需要被重新计算
        */
        var arr = ["item1","item2","item3","item4","item5","item6","item7","item8","item9","item10"]
        let ulDom = document.querySelector("#list")
        arr.forEach((item,i)=>{
            let liDom = document.createElement("li");
            liDom.textContent = item;
            // 延迟添加过程，为观察浏览器变化提供时间
            setTimeout(()=>{
                ulDom.appendChild( liDom );
            },2000*i)
        })
    </script>
        <hr>
        <ul id="list1"></ul>
        <div class="line"></div>
        <script>
            var arr = ["item1","item2","item3","item4","item5","item6","item7","item8","item9","item10"]
            let ulDom1 = document.querySelector("#list1")

            // 提供一个只存在与内存的DOM存放容器，该容器可以被当中一个普通DOM添加子元素；
            // 该元素被添加的子元素DOM最后可以作为一个整体，被增加的页面
            let tempContent = document.createDocumentFragment()

            arr.forEach((item,i)=>{
                let liDom = document.createElement("li");
                liDom.textContent = item;
                // tempContent.appendChild(liDom)
                // 延迟添加过程，为观察浏览器变化提供时间
                setTimeout(()=>{
                    console.log(i)
                    tempContent.appendChild(liDom)
                    // 当数组循环完成后，将文档片段整体加入到页面的UL中
                    if(i+1==arr.length){
                        ulDom1.appendChild(tempContent);
                    }
                },2000*i)
            })
        </script>
</body>
</html>